<template>
    <div class="key-mode">
        <View class="key-btn top" @click="$emit('control','top')">
            <img src="~@/assets/control/arrow.png">
        </View>
          <View class="key-btn bottom" @click="$emit('control','down')">
            <img src="~@/assets/control/arrow.png" >
        </View>
          <View class="key-btn left" @click="$emit('control','left')">
            <img src="~@/assets/control/arrow.png">
        </View>
          <View class="key-btn right" @click="$emit('control','right')">
            <img src="~@/assets/control/arrow.png">
        </View>
         <View class="key-btn ok" @click="$emit('control','ok')">
            <img src="~@/assets/control/ok.png">
        </View>
    </div>
</template>
<script>
import View from './View'
export default {
    name:'KeyMode',
    components: { View },
}
</script>
<style lang="stylus" scoped>
.key-mode
    position: relative;
    width: 236px;
    height: 236px;
    margin: -208px 0 0 -236px;
    .key-btn
        position absolute
        width 100%
        height 100%
        display flex
        align-items center
        justify-content center
        border 1Px solid red
        transform-origin: bottom right;
        border-radius: 100% 0 0 0;
        border-color: #d9d9d9 transparent transparent #d9d9d9;
        img 
            width: 32px;
            height: 19px;
            transform rotate(-45deg)

    .top
        transform rotate(45deg)
    .bottom
        transform: rotate(225deg);
    .left
        transform: rotate(-45deg);
    .right
        transform: rotate(135deg);
    .ok
        top 50%
        left 50%
        border: 1Px solid #d9d9d9;
        border-radius: 100%;
        background-color #fff
        transform: scale(.7);
        transform-origin: center;
        img 
            width: 70px;
            height: 37px;
            transform rotate(0deg)

        
    
</style>